<template>
  <v-layout title="修改采购合同" class="confirm">
    <el-row type="flex" justify="center">
      <el-col :lg="12" :md="12" :sm="28" :xs="24">
        <v-form
          :form-title="formTitle"
          :form-data="formData"
          label-width="120px"
        >
          <template
            slot="uploadImg"
            slot-scope="scope"
          >
            <el-form-item :label="scope.info.cn">
              <el-upload
                ref="upload"
                :on-preview="handlePreview"
                :file-list="fileList"
                :auto-upload="false"
                class="upload-demo"
                action="123">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
                  上传到服务器
                </el-button>
              </el-upload>
            </el-form-item>
          </template>

        </v-form>
        <!--<div>-->
        <!--<div class="subtitle">-->
        <!--包含销售订单:-->
        <!--</div>-->
        <!--<el-card>-->
        <!--<v-table-->
        <!--:table-title="tableTitle"-->
        <!--:table-data="tableData"-->
        <!--:showPagination="false"-->
        <!--:select="false"-->
        <!--:editable="false"-->
        <!--:deletable="false"-->
        <!--:readable="true"-->
        <!--@read="read"-->
        <!--&gt;-->

        <!--</v-table>-->
        <!--</el-card>-->
        <!--</div>-->

        <!--开票进度-->
        <!--<el-row class="mt15">-->
        <!--<div class="subtitle">-->
        <!--合同审批记录：-->
        <!--</div>-->
        <!--<v-messageBox-->
        <!--:messages="messages"-->
        <!--/>-->
        <!--</el-row>-->

        <!--<el-row type="flex" justify="end" class="pdt15">-->
        <!--<el-button type="primary"  size="small" @click="reset">撤销修改</el-button>-->
        <!--<el-button type="primary"  size="small" @click="submit">确定</el-button>-->
        <!--</el-row>-->
      </el-col>
    </el-row>

    <el-dialog
      :visible.sync="showModel"
      width="30%"
    >
      <img v-if="isImg" :src="previewUrl" style="width:100%;" alt="">
      <iframe v-else :src="previewUrl" style="width:100%;min-height:60vh" frameborder="0"/>
      <span slot="footer" class="dialog-footer">
        <!--<el-button @click="showModel = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="showModel = false">确 定</el-button>-->
      </span>
    </el-dialog>
  </v-layout>
</template>

<script>
import auth from '@/mixins/auth'
export default {
  mixins: [auth],
  data() {
    return {
      isImg: false,
      showModel: false,
      previewUrl: '/static/01.pdf',
      fileList: [],

      formData: {},

      tableTitle: [
        {
          cn: '序号',
          en: 'id'
        },
        {
          cn: '订单编号',
          en: 'number'
        },
        {
          cn: '公众号',
          en: 'tencent'
        },
        {
          cn: '版位',
          en: 'position'
        },
        {
          cn: '发文日期',
          en: 'publish_date'
        },
        {
          cn: '是否预订',
          en: 'ordered'
        }
      ],
      tableData: [],

      messages: []
    }
  },
  computed: {
    formTitle() {
      return ([
        {
          cn: '合同名',
          en: '合同名',
          disabled: !this.assistantRole
        },
        {
          cn: '合同编号',
          en: '合同编号',
          disabled: true
        },
        {
          cn: '合同附件',
          en: '附件',
          disabled: true
        },
        {
          cn: '对方单位名称',
          en: '对方单位名称',
          disabled: true
        },
        {
          cn: '对方负责人',
          en: '对方负责人',
          disabled: true
        },
        {
          cn: '采购内容',
          en: '内容',
          type: 'textarea',
          disabled: true
        },
        {
          cn: '合同金额', // 没有字段
          en: '合同金额',
          type: 'money',
          disabled: !this.assistantRole
        },
        {
          cn: '付款金额', // 没有字段
          en: '付款金额',
          type: 'money',
          disabled: !this.financeRole
        },
        {
          cn: '付款状态', // 没有字段
          en: 'stwatus',
          disabled: true,
          type: 'select',
          list: [
            {
              label: '未收款',
              value: '未收款'
            },
            {
              label: '部分收款',
              value: '部分收款'
            },
            {
              label: '已完成',
              value: '已完成'
            }
          ]
        },
        {
          cn: '付款银行',
          en: '付款银行',
          type: 'select',
          disabled: !this.financeRole,
          list: [
            // {
            //     label: '银行一',
            //     value: '银行一',
            // },
          ]
        },
        {
          cn: '付款时间', // 没有字段
          en: 'payment_time',
          type: 'time',
          disabled: !this.financeRole
        },
        {
          cn: '开票日期(对方)', // 没有字段
          en: 'invoice_time',
          type: 'time',
          disabled: !this.financeRole
        },
        {
          cn: '开票公司(对方)', // 没有字段
          en: 'invoice_company',
          disabled: !this.financeRole
        },
        {
          cn: '开票号',
          en: 'invoice_num',
          disabled: !this.financeRole
        },
        {
          cn: '签订日期',
          en: '签约日期',
          type: 'time',
          disabled: !this.assistantRole
        },
        {
          cn: '到期日期',
          en: 'finish_time',
          type: 'time',
          disabled: !this.assistantRole
        },
        {
          cn: '合同状态',
          en: 'status',
          type: 'select',
          list: [
            {
              label: '签约', // 没有对应字段
              value: '1'
            },
            {
              label: '执行中', // 没有对应字段
              value: '2'
            },
            {
              label: '完毕',
              value: 'COMPLETED'
            },
            {
              label: '意外终止',
              value: 'TERMINATED'
            }
          ],
          disabled: true
        },
        {
          cn: '合同类型', // 无字段
          en: 'bargain_type',
          type: 'select',
          list: [
            {
              label: '空白',
              value: '0'
            },
            {
              label: '直销合同',
              value: '1'
            },
            {
              label: '代理合同',
              value: '2'
            },
            {
              label: '服务合同',
              value: '3'
            },
            {
              label: '快销合同',
              value: '4'
            }
          ],
          disabled: true
        },
        {
          cn: '签订人',
          en: 'signer',
          disabled: true
        },
        {
          cn: '归档状态',
          en: '归档状态',
          disabled: !this.assistantRole,
          list: [
            {
              label: '是',
              value: '1'
            },
            {
              label: '否',
              value: '0'
            }
          ]
        },
        {
          cn: '归档时间',
          en: '归档时间',
          type:'time',
          disabled: !this.assistantRole
        },
        {
          cn: '备注',
          en: 'note',
          type: 'textarea'
          // disabled: true
        }
      ])
    }
  },
  created() {
    const details = this.$route.params.details
    if (details) {
      localStorage.setItem('details', JSON.stringify(details))
      this.formData = this.$route.params.data
    }

    this.formData = localStorage.getItem('details') && JSON.parse(localStorage.getItem('details')) || {}
    const attach = this.formData.合同附件 && JSON.parse(this.formData.合同附件)
    this.formData.合同附件 = attach ? attach.filename : ''
    this.formData.url = attach ? attach.attachIndex : ''
  },
  destroyed() {
    localStorage.removeItem('details')
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit()
    },
    handlePreview(file) {
      this.isImg = !/.pdf$/.test(file.name)
      this.showModel = true
      this.previewUrl = file.url
    },
    read(val) {
      this.$router.push({
        name: 'adv_order.order_info'
      })
    },
    reset() {

    },
    submit() {

    }
  }
}
</script>

<style scoped>

</style>
